<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css">
    <style>
    	body{
    	 background-color: rgb(37,40,41); 
    	} 
        #body{
            width: 170px;
            height: 50px;
           /* border:solid 1px black;*/ 
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }
        .label{
            color: red;
            font-size: 30px;
            display: none;
            float:right;
            margin-right: 5px;
        }
        .span{
        	color: red;
            font-size: 30px;
            float: right;
            margin-right: 5px;
        }
       /* .label_1:hover .span{
             display: none;
             margin-left: 30px;
        }*/
          input:hover ~ .label_1 .span{
             display: none;
             margin-left: 30px;
        } 
       /* .label_1:hover .label{
            display: block;
        }*/
        input:hover ~ .label_1 .label{
            display: block;
        } 
        /*.label_1:hover ~ .label_1 .label{
            display: block;
        }
        .label_1:hover ~ .label_1 .span{
            display: none;
        } */
        input{
        	width: 20px;
        	height: 20px;
        	position: absolute;
        	top: 3px;
            opacity: 0; 
        }
        #radio_1{
        	right: 5px;
        }
        #radio_2{
        	right: 38px;
        }
        #radio_3{
        	right: 71px;
        }
        #radio_4{
        	right: 104px;
        }
        #radio_5{
        	right: 137px;
        }
        input:checked ~ .label_1 .label{
        	 display: block;
        }
        input:checked ~ .label_1 .span{
        	 display: none;
        }
        #content{
        	color: cyan;
        	font-size: 30px;
        	font-weight: 800;
        	text-align: center;
        	margin-top: 30px;
        }
    </style>
</head>
<body>
   <div id="body">
   	   <input type="radio" name="score" id="radio_1"/>
       <label class="label_1"> <span class="fa fa-star-o span"></span> <label class="fa fa-star label"></label></label>
       <input type="radio" name="score" id="radio_2"/>
       <label class="label_1"> <span class="fa fa-star-o span"></span> <label class="fa fa-star label"></label></label>
       <input type="radio" name="score" id="radio_3"/>
       <label class="label_1"> <span class="fa fa-star-o span"></span> <label class="fa fa-star label"></label></label>
       <input type="radio" name="score" id="radio_4"/>
       <label class="label_1"> <span class="fa fa-star-o span"></span> <label class="fa fa-star label"></label></label>
       <input type="radio" name="score" id="radio_5"/>
       <label class="label_1"> <span class="fa fa-star-o span"></span> <label class="fa fa-star label"></label></label>
   </div>
   <div id="content">css3 星星打分</div>
</body>
</html>